<template>
  <div class="main">
    <el-col :span="4">
      <el-input placeholder="请输入key" v-model="name">
        <el-button type="primary" @click="willAdd">添加</el-button>
        <i slot="suffix" class="el-input__icon el-icon-search"></i>
      </el-input>
    </el-col>
    <el-button style="margin-left:20px" type="primary" @click="willAdd">添加</el-button>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column prop="key" label="参数" width="80"></el-table-column>
      <el-table-column prop="value" label="参数值" width="180"></el-table-column>
      <el-table-column prop="describle" label="描述" width="180"></el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="changeSwitch(scope.row.status)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="createName" width="100" label="创建人"></el-table-column>
      <el-table-column prop="createName" width="100" label="更新人"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="110"></el-table-column>
      <el-table-column prop="createTime" label="更新时间" width="110"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <PageNation />
  </div>
</template>

<script>
import PageNation from "../../components/PageNation";
export default {
  components: {
    PageNation,
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      console.log(rowIndex);
      if (rowIndex % 2 === 0) {
        return "warning-row";
      } else {
        return "";
      }
    },
      changeSwitch(status){
          console.log(value);
      },
      willAdd(){}
  },
  data() {
    return {
      name: "",
      tableData: [
        {
          key: "XS1115",
          value: "16637531877",
          describle: "在线",
          status: 1,
          createName: "高邓",
          createTime: "1993-01-16",
        },
        {
          key: "XS1115",
          value: "16637531877",
          describle: "在线",
          status: 1,
          createName: "高邓",
          createTime: "1993-01-16",
        },
        {
          key: "XS1115",
          value: "16637531877",
          describle: "在线",
          status: 1,
          createName: "高邓",
          createTime: "1993-01-16",
        },
        {
          key: "XS1115",
          value: "16637531877",
          describle: "在线",
          status: 2,
          createName: "高邓",
          createTime: "1993-01-16",
        },
        {
          key: "XS1115",
          value: "16637531877",
          describle: "在线",
          status: 1,
          createName: "高邓",
          createTime: "1993-01-16",
        },
        {
          key: "XS1115",
          value: "16637531877",
          describle: "在线",
          status: 2,
          createName: "高邓",
          createTime: "1993-01-16",
        },
        {
          key: "XS1115",
          value: "16637531877",
          describle: "在线",
          status: 1,
          createName: "高邓",
          createTime: "1993-01-16",
        },
        {
          key: "XS1115",
          value: "16637531877",
          describle: "在线",
          status: 2,
          createName: "高邓",
          createTime: "1993-01-16",
        },
        {
          key: "XS1115",
          value: "16637531877",
          describle: "在线",
          status: 1,
          createName: "高邓",
          createTime: "1993-01-16",
        },
        {
          key: "XS1115",
          value: "16637531877",
          describle: "在线",
          status: 1,
          createName: "高邓",
          createTime: "1993-01-16",
        },
      ],
    };
  },
};
</script>

<style>
.el-table .warning-row {
  background: rgb(230, 250, 253);
}

.el-table .success-row {
  background: #f0f9eb;
}
input {
  width: 50px;
}
</style>